<template>
    <div class="content-box">
        <div class="container">
            <p class="title">购买股票</p>
            <div style="margin: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <el-form-item label="请输入股票代码：" label-width="130px">
                    <el-input v-model="formLabelAlign.money"></el-input>
                </el-form-item>
                <el-form-item label="请输入股票名称：" label-width="130px">
                    <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="请输入购买数量：" label-width="130px">
                    <el-input v-model="formLabelAlign.count"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="submitForm()">确认购买</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            labelPosition: 'right',
            formLabelAlign: {
                money: '',
                name: '',
                count: ''
            }
        };
    },
    methods: {
        submitForm() {
            let config = {
                 // 关于comnteng-type，看https://www.jb51.net/article/145209.htm
                 headers: {
                     //'Content-Type': 'application/json'  //默认是这个
                     // 'Content-Type': 'multipart/form-data'
                     'Content-Type': 'application/x-www-form-urlencoded'
                }
            };
            let data = { stock_id: this.formLabelAlign.money,stock_name:this.formLabelAlign.name, volume: this.formLabelAlign.count };

            // axios方式发送请求
            this.$axios
                .post('http://127.0.0.1:8000/api/buy_stock/',data,config)
                .then(response => {
                    console.log(response.data);
                    this.tableData = response.data;
                    if (response.data.code == 1) {
                         alert('success!');
                    } else {
                         alert('fail!');
                     }
                })
                .catch(function(error) {
                    // 请求失败处理
                    console.log(error);
                });
        }
  }

};
</script>

<style>
.title {
    font-size: larger;
    margin-bottom: 30px;
}
.user {
    height: 100%;
    width: auto;
}
.btns {
  display: flex;
  justify-content: flex-end;

}
</style>
